<template>
	<div class="Navbar">
		<el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect" router
			text-color="white" active-text-color="#F56C6C">
			<el-menu-item index="home" route="/home">HOME</el-menu-item>
			<el-submenu index="project">
				<template slot="title">项目经验</template>
				<el-menu-item index="forum" route="/project/forum">风暴之眼游戏论坛</el-menu-item>
				<el-menu-item index="personalHome" route="/project/personalHome">PersonalHome个人主页</el-menu-item>
				<el-menu-item index="mall" route="/project/mall">迷恋商城</el-menu-item>
			</el-submenu>
			<el-menu-item index="/resume">简历</el-menu-item>
		</el-menu>
	</div>
</template>

<script>
	export default {
		name: 'Navbar',
		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1',
				//thisRouter: [],
			};
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			getRouter(){
				this.thisRouter = this.$route.path;
				console.log(this.thisRouter)
			},
		},
		// created(){
		// 	this.getRouter()
		// }
	}
</script>

<style lang="scss">
	.Navbar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 1;

		.el-menu {
			background-color: rgba(255, 255, 255, 0.1);
			padding-left: 20vw;

			li {
				background-color: rgba(255, 255, 255, 0) !important;

				div {
					background-color: rgba(255, 255, 255, 0) !important;
				}

				&:hover {
					background-color: rgba(255, 255, 255, 0.1) !important;
				}
			}
		}
	}

	.el-menu--horizontal {
		background-color: rgba(255, 255, 255, 0.1);

		ul {
			background-color: rgba(255, 255, 255, 0);

			li {
				background-color: rgba(255, 255, 255, 0) !important;

				&:hover {
					background-color: rgba(255, 255, 255, 0.1) !important;
				}
			}
		}
	}
</style>